<template>
  <view>
    <u-navbar :autoBack="true" leftIconSize="40rpx"></u-navbar>

    <view class="wrap">
      <view class="info">
        <u--image :showLoading="true" :src="videoInfo.tvImage" width="188rpx" height="250rpx" radius="24"></u--image>

        <view class="left">
          <view class="title">{{videoInfo.tvName}}</view>
          <view class="desc">{{videoInfo.classify}}</view>

          <view class="btnBox">
            <view class="btn" @click="toComment">
              <u--image :showLoading="true" src="/static/player/scRed.png" width="40rpx" height="40rpx" v-if="videoInfo.fid"></u--image>
              <u--image :showLoading="true" src="/static/player/sc.png" width="40rpx" height="40rpx" v-else></u--image>
              追剧
            </view>
            <view class="btn" @click="play">
              <u--image :showLoading="true" src="/static/player/start.png" width="40rpx" height="40rpx"></u--image>
              播放
            </view>
          </view>
        </view>
      </view>

      <view class="introduce">
        <view class="title">剧情介绍</view>
        <view class="desc">{{videoInfo.introduce}}</view>
      </view>

      <view class="swiper" v-if="swiperList.length > 0">
        <u-swiper :list="swiperList" @change="(e) => swiperCurrnet = e.current" keyName="image" @click="swiperClick" indicator indicatorMode="dot" indicatorActiveColor="#FE9E5A"
                  circular :autoplay='true' height='240'></u-swiper>
      </view>

      <view class="recommend">
        <view class="title">相关推荐</view>
        <view class="listBox">
          <video-card v-for="(item,index) in recommendTv" :key="index" :item="item" :view="false"/>
        </view>
      </view>

    </view>


  </view>
</template>
<script>
import {Api} from "../../service/api";
import { mapActions, mapMutations } from 'vuex'
import {gotoPage} from "../../utils/common";
import VideoCard from "../../components/videoCard.vue";

export default {
  name: "videoInfo",
  components: {VideoCard},
  data() {
    return {
      swiperList: [],
      swiperCurrnet: 0,
      userInfo: {},
      videoInfo: {},
      tvId: null,
      recommendTv: []
    }
  },
  async onLoad(op) {
    this.tvId = op.tvId
    this.userInfo = await this.getInfoMethod()
    this.swiper()
    await this.getTvInfo()
    this.getRecommendTv()
  },
  methods: {
    ...mapActions('userInfo', ['getInfoMethod']),
    gotoPage,
    swiper(){
      Api.swiper().then(res=>{
        this.swiperList = res.data
      })
    },
    swiperClick(index) {
      let item = this.swiperList[index]
      plus.share.getServices(function(res){
        var sweixin = null;
        for(var i=0;i<res.length;i++){
          var t = res[i];
          if(t.id == 'weixin'){
            sweixin = t;
          }
        }
        if(sweixin){
          sweixin.launchMiniProgram({
            id: 'gh_657d490da83f',  //这里写你的小程序原始id（以gh开头）
            type: 0,//这里是不同的环境（默认0）
            path:'pages/index/index'//这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
          });
        }
      },function(res){
        console.log(JSON.stringify(res));
      });
      // gotoPage(`/pages/player/player?tt_album_id=${item.albumId}&tt_episode_id=0&tvId=${item.tvId}`)
    },
    // 获取短剧信息
    async getTvInfo () {
      let res = await Api.getTvInfo({ id: this.tvId })
      this.videoInfo = res.data
    },
    toComment(){
      if (!this.userInfo) {
        uni.showToast({
          title: "请登录",
          icon: 'none',
          mask: true
        });
        return;
      }
      Api.followUserPost({
        tvId: this.tvId,
        tvName: this.videoInfo.tvName,
        tvImage: this.videoInfo.tvImage,
      }).then(res=>{
        this.videoInfo.fid = res.data
      })
    },
    play(){
      uni.navigateBack();
    },
    getRecommendTv(){
      Api.getRecommendTv(1).then(res=>{
        this.recommendTv = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20rpx 30rpx 0;

  .title{
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
    margin-top: 40rpx;
  }

  .info{
    display: flex;
    margin-top: 150rpx;

    .left{
      margin-left: 25rpx;
      display: flex;
      flex-direction: column;

      .title{
        color: #333333;
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 10rpx;
      }

      .desc{
        color: #717171;
        font-size: 24rpx;
        margin-top: 15rpx;
        font-family: 'pc',sans-serif;
        word-spacing: 10px;
      }

      .btnBox{
        display: flex;
        width: 100%;
        margin-top: 70rpx;
        gap: 30rpx;

        .btn{
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #333333;
          gap: 8rpx;
          background-color: #EBEAEA;
          border-radius: 10rpx;
          padding: 10rpx 12rpx;
        }
      }
    }

  }

  .introduce{
    .desc{
      font-size: 28rpx;
      color: #717171;
      font-family: 'pc',sans-serif;
      //letter-spacing: 0.5rpx;
    }
  }

  .swiper {
    width: 686rpx;
    height: 246rpx;
    border-radius: 20rpx;
    margin: 30rpx 0;
    overflow: hidden;
  }

  .listBox {
    width: 700rpx;
    padding-bottom: 130rpx;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    gap: 23rpx;
  }
}


</style>
